<template>
  <div class="photo">
    <button @click="getRequest">获取图片</button>
    <button @click="page++">页码加一</button>
    <div class="img-show" v-if="list[page - 1]">
      <img
        v-for="item in list[page - 1].data"
        :key="item.id"
        :src="item.thumbs.small"
      />
    </div>
  </div>
</template>
    
<script>
import axios from "../utils/request";

export default {
  name: "showPhoto",
  components: {},
  data() {
    return {
      list: [],
      page: 1,
    };
  },
  methods: {
    getRequest() {
        // import('../images/wallhaven/wallhaven1.json').then(res=>{
        //     console.log('***res***', res);
        //     this.list = res.content;
        // })
      axios.get("/assets/images/wallhaven/wallhaven1.json").then((res) => {
        console.log("***res.data***", res.data.content);
        // this.list = res.data.content;
      });
    },
  },
};
</script>
    
<style scoped lang="less">
.photo {
  .img-show {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    img {
      margin: 5px 0;
    }
  }
}
</style>